---
title: Quickstart
---

export const metadata = {
  title: "Quickstart",
  description: "Learn how to get started with Stagewise.",
};

## 1. Install the VS Code Extension

Install the extension here: [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=stagewise.stagewise-vscode-extension)

## 2. Install and Inject the Toolbar

> 💡 **Tip:** In VS Code, you can open the Command Palette by pressing <kbd>CMD</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (or <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> on Windows/Linux).

> 🪄 **Auto-Install the toolbar (AI-guided):**
> 1. In Cursor, Press `CMD + Shift + P`
> 2. Enter `setupToolbar`
> 3. Execute the command and the toolbar will init automatically 🦄

Or follow the manual way:

```bash
pnpm i -D @stagewise/toolbar
```

Inject the toolbar into your app dev-mode:

```ts
// 1. Import the toolbar
import { initToolbar } from '@stagewise/toolbar';

// 2. Define your toolbar configuration
const stagewiseConfig = {
  plugins: [
    {
      name: 'example-plugin',
      description: 'Adds additional context for your components',
      shortInfoForPrompt: () => {
        return "Context information about the selected element";
      },
      mcp: null,
      actions: [
        {
          name: 'Example Action',
          description: 'Demonstrates a custom action',
          execute: () => {
            window.alert('This is a custom action!');
          },
        },
      ],
    },
  ],
};

// 3. Initialize the toolbar when your app starts
function setupStagewise() {
  if (process.env.NODE_ENV === 'development') {
    initToolbar(stagewiseConfig);
  }
}

// Call the setup function
setupStagewise();
```

> ⚡️ The toolbar will **automatically connect** to the extension!

### Framework-specific integration examples

You can integrate Stagewise with your favorite frontend framework. See below for examples:

<details>
<summary>React.js</summary>

We provide the `@stagewise/toolbar-react` package for React projects. Initialize the toolbar in your main entry file (e.g., `src/main.tsx`) by creating a separate React root for it. This ensures it doesn't interfere with your main application tree.

***We recommend installing the React plugin (`@stagewise-plugins/react`) for improved agent behavior and additional support 🚀***

```tsx
// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { StagewiseToolbar } from '@stagewise/toolbar-react';
import './index.css';

// Render the main app
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
    <StagewiseToolbar />
  </StrictMode>,
);
```
</details>

<details>
<summary>Next.js</summary>

Use the `@stagewise/toolbar-next` package for Next.js applications. Include the `<StagewiseToolbar>` component in your root layout file (`src/app/layout.tsx`).

***We recommend installing the React plugin (`@stagewise-plugins/react`) for improved agent behavior and additional support 🚀***

```tsx
// src/app/layout.tsx
import { StagewiseToolbar } from '@stagewise/toolbar-next';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <StagewiseToolbar />
        {children}
      </body>
    </html>
  );
}
```

</details>

<details>
<summary>Nuxt.js</summary>

For Nuxt.js projects, you can use the `@stagewise/toolbar-vue` package. Place the `<StagewiseToolbar>` component in your `app.vue` or a relevant layout file.

***We recommend installing the Vue plugin (`@stagewise-plugins/vue`) for improved agent behavior and additional support 🚀***

```vue
<!-- app.vue -->
<script setup lang="ts">
import { StagewiseToolbar } from '@stagewise/toolbar-vue';

</script>

<template>
  <div>
    <NuxtRouteAnnouncer />
    <ClientOnly>
      <StagewiseToolbar/>
    </ClientOnly>
    <NuxtWelcome />
  </div>
</template>
```

</details>

<details>
<summary>Vue.js</summary>

Use the `@stagewise/toolbar-vue` package for Vue.js projects. Add the `<StagewiseToolbar>` component to your main App component (e.g., `App.vue`).

***We recommend installing the Vue plugin (`@stagewise-plugins/vue`) for improved agent behavior and additional support 🚀***

```vue
<!-- src/App.vue -->
<script setup lang="ts">
import { StagewiseToolbar } from '@stagewise/toolbar-vue';

</script>

<template>
  <StagewiseToolbar />
  <div>
    <!-- Your app content -->
  </div>
</template>
```

</details>

<details>
<summary>Angular</summary>

Use the `@stagewise/toolbar` package for Angular projects. Conditionally call the `initToolbar()` function in `main.ts` whenever you want the toolbar to be active.

***We recommend installing the Angular plugin (`@stagewise-plugins/angular`) for improved agent behavior and additional support 🚀***

```ts
// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { initToolbar } from '@stagewise/toolbar';
import { AngularPlugin } from '@stagewise-plugins/angular';

// Only initialize in development mode (customize as needed)
if (!('production' in window) || !window.production) {
  initToolbar({
    plugins: [AngularPlugin]
  });
}

bootstrapApplication(AppComponent, appConfig).catch((err) =>
  console.error(err),
);
```

</details>

For more, check out our [examples repo](https://github.com/stagewise-io/stagewise/tree/main/examples) for Next.js, Nuxt, Angular and SvelteKit. 